<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/bootstrap-theme.css">
  <title>表单提交</title>
  <style>
    .profPrompt_test {
      z-index: 10;
      cursor: pointer;
      padding: 50px 0px;
      width: 1100px;
      overflow: hidden;
      line-height: 28px;
      border: 1px solid #81f36b;
      color: #37c71a;
      position: absolute;
      background-color: #fbfbfb;
      top: 300px;
      left: 50%;
      font-size: 16px;
      font-family: Gotham-Book;
      opacity: 1;
      font-size: 14px;
      text-align: center;
      transform: translate(-50%, -50%);
    }

    .profPrompt_test button {
      font-size: 10px;
      /* padding: 2px; */
      border: 1px solid #81f36b;
      position: relative;
      top: 40px;
      left: -100px;
      color: #81f36b;
      background-color: #fff;
    }

    .profPrompt_test button:focus {
      outline: none;
    }

    .check-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .table-box {
      position: relative;
    }

    .load-more {
      cursor: pointer;
      position: absolute;
      bottom: 0;
      left: 37%;
      font-size: 14px;
      font-weight: 400;
    }
  </style>
</head>

<body>
  <br>
  <div id="app" class='container'>
    <!-- 表单 -->
    <div class="row">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">账号：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="form.username">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">姓名：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="form.name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">密码：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="form.password">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">年龄：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="form.age">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">手机号：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="form.phone">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">邮箱：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" v-model="form.email">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">性别：</label>
          <div class="col-sm-4">
            <input type="radio" value="先生" v-model="form.sex">先生
            <input type="radio" value="女士" v-model="form.sex">女士
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">爱好：</label>
          <div class="col-sm-4">
            <input type="checkbox" value="看书" v-model="form.hobbies">看书
            <input type="checkbox" value="写字" v-model="form.hobbies">写字
            <input type="checkbox" value="做作业" v-model="form.hobbies">做作业
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-4">
            <template v-if="uid == ''">
              <button type="button" @click="addUser" class="btn btn-success">添加用户</button>
            </template>
            <template v-else>
              <button type="button" @click="editUser(uid,index)" class="btn btn-primary">修改用户</button>
            </template>
          </div>
        </div>

      </form>
    </div>
    <div style="padding: 100px 100px 10px;">
      <form class="bs-example bs-example-form" role="form">
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
              </span>
            </div>
          </div>
        </div>
      </form>
    </div>
    <!-- 用户列表 -->
    <div class="row table-box">
      <table class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>性别</th>
            <th>爱好</th>
            <th>访问量</th>
            <th>操作</th>
            <th>
              <input type="checkbox" v-model='checked' @click='allcheck()'>
              <a class="label label-danger" @click='alldel()'>全选删除</a>
            </th>
            <th>
              <button @click='recover()' class="btn btn-default">恢复</button>
            </th>
          </tr>
        </thead>
        <tr v-for="(item,index) in users.slice(0,a)" :key="'users_'+item._id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.phone }}</td>
          <td>{{ item.email }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.hobbies }}</td>
          <td>访问量：{{ item.visitor }}</td>
          <td>
            <a class="label label-success" @click="edit(index,item)">修改</a>
            <a class="label label-danger" @click="del(index,item._id)">删除</a>
            <a class="label label-primary" @click="check(index,item)">查看</a>
          </td>
          <td><input type='checkbox' v-model='checkboxlist' value="ren_checkbox"></td>
        </tr>
        <div class="alsrtInfo" :style="{display: displayStsates}" ref="alertMsg">
          <div class="profPrompt_test">
            <p class="check-box">
              <span class="check">姓名：{{ ch.name }}</span>
              <span class="check">年龄：{{ ch.age }}</span>
              <span class="check">电话：{{ ch.phone }}</span>
              <span class="check">邮箱：{{ ch.email }}</span>
              <span class="check">性别：{{ ch.sex }}</span>
              <span class="check">爱好：{{ ch.hobbies }}</span>
            </p>
            <button class="btn btn-success" @click='hide()'>确定</button>
          </div>
        </div>
      </table>
      <div class="load-more mr-bottom" v-if="a<users.length" @click='loadMore' :style='{fontWeight:400}'>点击加载更多</div>
      <div class="load-more mr-bottom" v-else>没有更多了</div>
    </div>
  </div>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.js"></script>
  <script src="./add.js"></script>
  <script>
    axios.defaults.baseURL = 'http://localhost:8080/admin'
    new Vue( {
      el: '#app',
      data: {
        aletMsg: '',
        displayStsates: 'none',
        uid: '',
        index: 0,
        users: [],
        ch: {},
        checked: false,
        checkboxlist: [],
        msg: [],
        a: 3,
        form: {
          username: '',
          name: '',
          password: '',
          age: '',
          phone: '',
          email: '',
          sex: '',
          hobbies: [],
          visitor: 0,
        }
      },
      async mounted() {
        this.find()
      },
      methods: {
        async addUser() {
          let flag = Object.entries( this.form ).some( ( [ key, value ] ) => {
            if ( Array.isArray( value ) ) {
              if ( value.length == 0 ) {
                return false
              }
            }
            if ( value == '' ) {
              return false
            }
            return true
          } )
          if ( flag ) {
            let res = await axios.post( '/add', this.form )
            this.find()
            this.form = ''
          }
        },
        async del( index, id ) {
          let res = await axios.post( '/del', {
            id: id
          } )
          this.users.splice( index, 1 )
        },
        alertMsg( msg ) {
          this.displayStsates = 'block'
          this.aletMsg = msg;
        },
        hide() {
          this.displayStsates = 'none'
        },
        edit( index, obj ) {
          this.form = obj
          this.uid = obj._id
          this.index = index
        },
        async editUser( Uid, index ) {
          this.users[ index ] = this.form
          let res = await axios.put( '/put', this.form )
          this.form = ''
        },
        async recover() {
          let res = await axios.get( '/recover' )
          this.find()
        },
        async find() {
          let {
            data
          } = await axios.get( '/find' )
          this.users = data
        },
        async alldel() {
          this.checked = true
          await axios.post( '/alldel' )
          this.users = []
        },
        async check( index, obj ) {
          console.log( this.form.visitor );

          this.displayStsates = 'block'
          this.ch = obj
          this.index = index
          this.ch.visitor++
          let res = await axios.post( '/check', this.ch )
        },
        allcheck() {
          if ( this.checked ) {
            this.checkboxlist = []
          } else {
            this.checkboxlist = [ 'ren_checkbox' ]
          }
        },
        loadMore() {
          this.a += 3
        }
      }
    } )
  </script>
</body>

</html>